<template>
<p>{{ msg }}</p>
<button @click="f1()">测试1</button><br>
<!-- 如果没有参数,括号可以省略 -->
<button @click="f1">测试1简写方式</button><br>
<button @click="f2('Hello World')">测试2</button><br>
<!-- 可以通过$event.target.value获取输入框中的数据 -->
<input type="text" @input="f3($event.target.value)"><br>
<button @click="msg = 'Hello World'">测试3直接赋值</button>
</template>
<script setup>
import { ref } from 'vue';

const msg = ref('Hello Vue')

function f1(){
    console.log('正在执行f1方法')
    msg.value = '正在执行f1方法'
}

function f2(args){
    msg.value = args;
}

function f3(args){
    console.log(args)
    msg.value = args;
}

</script>